<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">
	
	<!-- métodos rodados ao carregar página -->
	<f:event listener="#{utilizacaoBean.listarUtilizacaoEspera}" type="preRenderView" />
	<f:event listener="#{utilizacaoBean.listarUtilizacaoAndamento}" type="preRenderView" />
	<f:event listener="#{utilizacaoBean.listarVideogameDisponivel}" type="preRenderView" />
<h:head>
	<style>
.posicao_botao {
	width: 51%;
}
.botao {
	margin-top: 5px;
	margin-left: 5px;
}

.tableConsulta tr:nth-child(even) {
	background-color: #cacaca;
}

.tableConsulta {
	border: 1px solid #cacaca;
	border-collapse: collapse;
	border-spacing: 0;
}
</style>

	<style>
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}
</style>
	  
</h:head>
<body bgcolor="#E8E8E8">
	<!-- global confirm -->
	<p:confirmDialog global="true" showEffect="fade">
		<p:commandButton value="Sim" type="button"
			styleClass="ui-confirmdialog-yes" />
		<p:commandButton value="Não" type="button"
			styleClass="ui-confirmdialog-no" />
	</p:confirmDialog>

	<!-- Includes -->
	<!-- Cliente -->
	<p:dialog id="dialog_cliente" header="Clientes"
		widgetVar="modalCliente" modal="true" width="100%" height="500"
		position="bottom">
		<ui:include src="/Cliente/Cliente.xhtml"></ui:include>
	</p:dialog>

	<!-- Evento -->
	<p:dialog id="dialog_evento" header="Eventos" widgetVar="modalEvento"
		modal="true" width="100%" height="500" position="bottom">
		<ui:include src="/Evento/Evento.xhtml"></ui:include>
	</p:dialog>

	<!-- Jogo -->
	<p:dialog id="dialog_jogo" header="Jogos" widgetVar="modalJogo"
		modal="true" width="100%" height="500" position="bottom">
		<ui:include src="/Jogo/Jogo.xhtml"></ui:include>
	</p:dialog>

	<!-- Plataforma -->
	<p:dialog id="dialog_plataforma" header="Plataformas"
		widgetVar="modalPlataforma" modal="true" width="100%" height="500"
		position="bottom">
		<ui:include src="/Plataforma/Plataforma.xhtml"></ui:include>
	</p:dialog>

	<!-- Usuario -->
	<p:dialog id="dialog_usuario" header="Usuários"
		widgetVar="modalUsuario" modal="true" width="100%" height="500"
		position="bottom">
		<ui:include src="/Usuario/Usuario.xhtml"></ui:include>
	</p:dialog>

	<!-- Videogame -->
	<p:dialog id="dialog_videogame" header="Videogames"
		widgetVar="modalVideogame" modal="true" width="100%" height="500"
		position="bottom">
		<ui:include src="/Videogame/Videogame.xhtml"></ui:include>
	</p:dialog>
	
	<h:form id="form_incluirUtilizacao">
		<!-- tela incluir utilização -->
		<p:dialog id="dialogIncluirUtilizacao"
			widgetVar="dialogIncluirUtilizacao" modal="true" closable="false">
			<table border="0">
				<tr>
					<td><b>Nome:</b></td>
					<td><h:outputText value="#{utilizacaoBean.cliente.nome}" /></td>
				</tr>
				<tr>
					<td><b>Login:</b></td>
					<td><h:outputText value="#{utilizacaoBean.cliente.login}" />
					</td>
				</tr>
			</table>
			<hr />
			<table border="0">
				<tr>
					<td><b>Plataforma:</b></td>
					<td><p:selectOneMenu value="#{utilizacaoBean.plataforma.id}">
							<f:selectItem itemLabel="Selecione" itemValue="" />
							<f:selectItems value="#{utilizacaoBean.listaPlataforma}"
								var="plataforma" itemLabel="#{plataforma.nome}"
								itemValue="#{plataforma.id}" />
							<p:ajax listener="#{utilizacaoBean.listarJogo}"
								update="comboJogo" />
						</p:selectOneMenu></td>
				</tr>
				<tr>
					<td><b>Jogo:</b></td>
					<td><p:selectOneMenu id="comboJogo" widgetVar="comboJogo"
							value="#{utilizacaoBean.jogo.id}">
							<f:selectItem itemLabel="Selecione" itemValue="" />
							<f:selectItems value="#{utilizacaoBean.listaJogo}" var="jogo"
								itemLabel="#{jogo.titulo}" itemValue="#{jogo.id}" />
						</p:selectOneMenu></td>
				</tr>
			</table>
			<br />

			<table border="0">
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
					<td><p:panel id="painel_2">
							<table border="0">
								<tr>
									<td><b>Tempo:</b></td>
									<td>
											<p:inputMask id="dialogIncluirUtilizacao_tempo" value="#{utilizacaoBean.utilizacao.qtdTempoSolicitado}" 
											mask="99:99" converter="tempoConverter" style="width:50px;">
												<p:ajax event="blur" listener="#{utilizacaoBean.calcularValorTempo}" update="dialogIncluirUtilizacao_valor" />
											</p:inputMask>
											</td>
								</tr>
								<tr>
									<td><b>Valor: R$</b></td>
									<td>
										<p:inputMask id="dialogIncluirUtilizacao_valor" value="#{utilizacaoBean.valorUtilizacao}"
										 style="width:50px;" converter="valorConverter" mask="99,99" >
											<p:ajax event="blur" listener="#{utilizacaoBean.calcularTempoPeloValor}" update="dialogIncluirUtilizacao_tempo" />
										</p:inputMask>
									</td>
								</tr>
							</table>
						</p:panel>
						<br /> 
						<p:commandButton value="Cancelar" action="#{utilizacaoBean.cancelarOperacao}" update="dialogIncluirUtilizacao" /> 
						<p:commandButton
							value="Continuar" action="#{utilizacaoBean.continuarInclusao}"
							update="dialogIncluirUtilizacao, :form_3:dataListEspera" /></td>
				</tr>
			</table>
		</p:dialog>
	</h:form>
	
	<h:form id="form_visu_util_espera">
		<!-- tela visualizar utilização espera -->
		<p:dialog id="dialogVisualizarUtilizacaoEspera"
			widgetVar="dialogVisualizarUtilizacaoEspera" modal="true">
			<table border="0">
				<tr>
					<td><b>Nome:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.nome}" /></td>
				</tr>
				<tr>
					<td><b>Login:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.login}" />
					</td>
				</tr>
			</table>
			<hr />
			<table border="0">
				<tr>
					<td><b>Plataforma:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.jogos.get(0).plataforma.nome}" /></td>
				</tr>
				<tr>
					<td><b>Jogo:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.jogos.get(0).titulo}" /></td>
				</tr>
			</table>
			<br />

			<table border="0">
				<tr>
					<td><p:panel>
							<table border="0">
								<tr>
									<td><b>Tempo:</b></td>
									<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoSolicitado}" converter="segundosToHorasConverter" /></td>
								</tr>
								<tr>
									<td><b>Valor: R$</b></td>
									<td></td>
								</tr>
							</table>
						</p:panel>
						<br /> 
						<p:commandButton value="Cancelar" update="dialogVisualizarUtilizacaoEspera" 
						action="#{utilizacaoBean.cancelarOperacao}" /></td>
				</tr>
			</table>
		</p:dialog>
	</h:form>
	
	<h:form id="form_visualizar_util">
		<!-- tela pausar utilização -->
		<p:dialog id="dialogVisuUtilizacao"
			widgetVar="dialogVisuUtilizacao" modal="true">
			<table border="0">
				<tr>
					<td><b>Nome:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.nome}" /></td>
				</tr>
				<tr>
					<td><b>Login:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.login}" />
					</td>
				</tr>
			</table>
			<hr />
			<table border="0">
				<tr>
					<td><b>Plataforma:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.videogame.plataforma.nome}" /></td>
				</tr>
				<tr>
					<td><b>Jogo:</b></td>
					<td><h:outputText value="#{utilizacaoBean.jogoAtual.titulo}" /></td>
				</tr>
			</table>
			<hr />
			<table>	
				<tr>
					<td><b>Tempo Solicitado:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoSolicitado}" converter="segundosToHorasConverter" /></td>
				</tr>
				<tr>
					<td><b>Tempo Utilizado:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoUtilizado}" converter="segundosToHorasConverter" /></td>
				</tr>				
			</table>
			<br />

			<table border="0">
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
					<td><br /> <p:commandButton value="Fechar" update=":form_visualizar_util:dialogVisuUtilizacao" action="#{utilizacaoBean.cancelarOperacao}" /> </td>
				</tr>
			</table>
		</p:dialog>
	</h:form>
	
	<h:form id="form_pausar_util">
		<!-- tela pausar utilização -->
		<p:dialog id="dialogPausarUtilizacao"
			widgetVar="dialogPausarUtilizacao" modal="true">
			<table border="0">
				<tr>
					<td><b>Nome:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.nome}" /></td>
				</tr>
				<tr>
					<td><b>Login:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.login}" />
					</td>
				</tr>
			</table>
			<hr />
			<table border="0">
				<tr>
					<td><b>Plataforma:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.videogame.plataforma.nome}" /></td>
				</tr>
				<tr>
					<td><b>Jogo:</b></td>
					<td><p:selectOneMenu widgetVar="comboJogo"
							value="#{utilizacaoBean.jogo.id}">
							<f:selectItem itemLabel="#{utilizacaoBean.jogoAtual.titulo}" 
							itemValue="#{utilizacaoBean.jogoAtual.id}" />
							<f:selectItems value="#{utilizacaoBean.listaJogo}" var="jogo"
								itemLabel="#{jogo.titulo}" itemValue="#{jogo.id}" />
						</p:selectOneMenu></td>
				</tr>
			</table>
			<hr />
			<table>	
				<tr>
					<td><b>Tempo Solicitado:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoSolicitado}" converter="segundosToHorasConverter" /></td>
				</tr>
				<tr>
					<td><b>Tempo Utilizado:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoUtilizado}" converter="segundosToHorasConverter" /></td>
				</tr>				
			</table>
			<br />

			<table border="0">
				<tr>
					<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
					<td><fieldset>
						<legend>Adicionar tempo</legend>
							<table border="0">
								<tr>
									<td><b>Tempo:</b></td>
									<td>
											<p:inputMask value="#{utilizacaoBean.tempoAdicional}" converterMessage="tempoConverter"
											mask="99:99" converter="tempoConverter" style="width:50px;"/>
											</td>
								</tr>
								<tr>
									<td><b>Valor: R$</b></td>
									<td><p:inputText style="width:50px;" /></td>
								</tr>
							</table>
						</fieldset>
						<br /> 
						<p:commandButton value="Encerrar" action="#{utilizacaoBean.ecerrarUtilizacao}" 
						update=":form_3:dataTableUtilizacao, :form_3:dataTableVideogame, :form_pausar_util:dialogPausarUtilizacao"/> 
						<p:commandButton
							value="Continuar" action="#{utilizacaoBean.alterarPausa}" oncomplete="PF('timer#{utilizacaoBean.utilizacao.id}').start()"
							update=":form_pausar_util:dialogPausarUtilizacao, :form_incluirUtilizacao:dialogIncluirUtilizacao, :form_3:dataListEspera, :form_3:dataTableUtilizacao" /></td>
				</tr>
			</table>
		</p:dialog>
	</h:form>
	
	<h:form id="form_encerrar_util">
		<!-- tela encerrar utilização -->
		<p:dialog id="dialogEncerrarUtilizacao"
			widgetVar="dialogEncerrarUtilizacao" modal="true">
			<table border="0">
				<tr>
					<td><b>Nome:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.nome}" /></td>
				</tr>
				<tr>
					<td><b>Login:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.cliente.login}" />
					</td>
				</tr>
			</table>
			<br />
			<hr />
			<table border="0">
				<tr>
					<td><b>Plataforma:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.videogame.plataforma.nome}" /></td>
				</tr>
				<tr>
					<td><b>Jogos Utilizados:</b></td>
					<td>
					</td>
				</tr>
				<tr>					
					<td>
						<p:dataList	value="#{utilizacaoBean.utilizacao.jogos}" var="jogo" type="definition">
							#{jogo.titulo}					        
					    </p:dataList>
					</td>
					<td></td>
				</tr>
				<tr>
					<td><b>Tempo Solicitado:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoSolicitado}" converter="segundosToHorasConverter" /></td>
				</tr>
				<tr>
					<td><b>Tempo Utilizado:</b></td>
					<td><h:outputText value="#{utilizacaoBean.utilizacao.qtdTempoUtilizado}" converter="segundosToHorasConverter" /></td>
				</tr>
				<tr>
					<td><b>Valor: R$</b></td>
					<td></td>
				</tr>
			</table>
			<p:commandButton value="Encerrar" action="#{utilizacaoBean.ecerrarUtilizacao}" 
			update=":form_3:dataTableUtilizacao, :form_3:dataTableVideogame, dialogEncerrarUtilizacao"/>
			<br />
		</p:dialog>
	</h:form>
	
	<h:form id="form_3">
		<p:growl id="messages" />

		<p:layout fullPage="true">

			<p:layoutUnit position="north" size="130" style="background-color:#E8E8E8">
				<div style="font-size:40px; background-color:#E8E8E8">Play Games</div>
		<div style="background-color:#E8E8E8">Sistema Gerenciador</div>
				<p:menubar>
					<p:menuitem value="Utilização" />
					<p:submenu label="Cadastros">
						<p:menuitem value="Cliente" action="#{clienteBean.listarCliente}"
							update=":panelGroupCliente"
							oncomplete="PF('modalCliente').show();" />
						<p:menuitem value="Evento" action="#{eventoBean.listarEvento}"
							update=":formListarEvento" oncomplete="PF('modalEvento').show();" />
						<p:menuitem value="Jogo" action="#{jogoBean.listarJogo}"
							update=":panelGroupJogo" oncomplete="PF('modalJogo').show();" />
						<p:menuitem value="Plataforma"
							action="#{plataformaBean.listarPlataforma}"
							update=":formListarPlataforma"
							oncomplete="PF('modalPlataforma').show();" />
						<p:menuitem value="Usuário" action="#{usuarioBean.listarUsuario}"
							update=":panelGroupUsuario"
							oncomplete="PF('modalUsuario').show();" />
						<p:menuitem value="Videogame"
							action="#{videogameBean.listarVideogame}"
							update=":panelGroupVideogame"
							oncomplete="PF('modalVideogame').show();" />
					</p:submenu>
				</p:menubar>
			</p:layoutUnit>
			<!--  -->

	<p:layoutUnit position="west"  header="Utilizações" size="700">							
		<p:dataTable id="dataTableUtilizacao" 
			widgetVar="dataTableUtilizacao" 
			value="#{utilizacaoBean.listaUtilizacaoAndamento}" 
			var="utilizacao">

				<p:column>
					<f:facet name="header">
						<h:outputText value="Código" />
					</f:facet>
					<h:outputText value="#{utilizacao.videogame.id}" />
				</p:column>
				<p:column>
					<f:facet name="header">
						<h:outputText value="Videogame" />
					</f:facet>
					<h:outputText value="#{utilizacao.videogame.plataforma.nome}" />
				</p:column>
				<p:column>
					<f:facet name="header">
						<h:outputText value="Login" />
					</f:facet>
					<h:outputText value="#{utilizacao.cliente.login}" />
				</p:column>
				<p:column>
					<f:facet name="header">
						<h:outputText value="Tempo" />
					</f:facet>
					<pe:timer widgetVar="timer#{utilizacao.id}" timeout="#{utilizacao.tempoRestante}" oncomplete="PF('dialogEncerrarUtilizacao').show();"
					format="HH:mm:ss" listener="#{utilizacaoBean.terminarUtilizacao(utilizacao)}" autoStart="#{utilizacao.stop eq true ? false : true}" update=":form_encerrar_util:dialogEncerrarUtilizacao" />
				</p:column>
				<p:column>
					<p:commandButton value="vizualizar" action="#{utilizacaoBean.visualizarUtilizacao}" 
					oncomplete="PF('dialogVisuUtilizacao').show()" style="position:center"
					update=":form_visualizar_util:dialogVisuUtilizacao">
						<f:setPropertyActionListener target="#{utilizacaoBean.utilizacao}" value="#{utilizacao}"/>
					</p:commandButton>
				</p:column>
				<p:column>
					<p:commandButton value="Pausar" style="position:center" onclick="PF('timer#{utilizacao.id}').pause()" oncomplete="PF('dialogPausarUtilizacao').show()" 
					 update=":form_pausar_util:dialogPausarUtilizacao" action="#{utilizacaoBean.pausarUtilizacao}">
						<f:setPropertyActionListener target="#{utilizacaoBean.utilizacao}" value="#{utilizacao}"/>
					</p:commandButton>
				</p:column>
			</p:dataTable>
				
				
				
				
			</p:layoutUnit>

			<p:layoutUnit position="east" size="330">
				<p:panel id="incluirUtilizacao" header="Incluir Utilização"
					style="margin-bottom:20px">
					<h:outputLabel value="CPF: " />
					<p:inputMask value="#{utilizacaoBean.cliente.cpf}" mask="999.999.999-99" />
					<br />
					<br />
					<div align="right">
						<p:commandButton value="Enviar"
							action="#{utilizacaoBean.incluirUtilizacao}"
							update=":form_incluirUtilizacao:dialogIncluirUtilizacao"
							oncomplete="PF('dialogIncluirUtilizacao').show();" />
					</div>
				</p:panel>


				<p:dataList id="dataListEspera" widgetVar="dataListEspera"
					value="#{utilizacaoBean.listaUtilizacaoEspera}" var="utilizacao"
					type="definition">
					<f:facet name="header">
			            Espera
			        </f:facet>
			        <p:panel header="Login: #{utilizacao.cliente.login}" closeSpeed="0" style="padding: 0px; margin: 10px; ">
			        	<p:commandButton style=" height:30px; font-size: 70%;" value="Iniciar" 
			        	action="#{utilizacaoBean.iniciarUtilizacao}" 
			        	update=":form_3:dataTableUtilizacao, :form_3:dataListEspera, :form_3:dataTableVideogame">
			        		<f:setPropertyActionListener target="#{utilizacaoBean.utilizacao}"
							value="#{utilizacao}"/>
			        	</p:commandButton>
			        	<p:commandButton style="height:30px; font-size: 70%;"  value="Visualizar" 
			        	oncomplete="PF('dialogVisualizarUtilizacaoEspera').show();" update=":form_visu_util_espera:dialogVisualizarUtilizacaoEspera">
			        		<f:setPropertyActionListener target="#{utilizacaoBean.utilizacao}"
							value="#{utilizacao}"/>
			        	</p:commandButton>
			        	<p:commandButton style=" height:30px; font-size: 70%;"  value="Cancelar" 
			        	action="#{utilizacaoBean.cancelarUtilizacao}" update=":form_3:dataListEspera">
			        		<f:setPropertyActionListener target="#{utilizacaoBean.utilizacao}"
							value="#{utilizacao}"/>
			        	</p:commandButton>
			        </p:panel>
			    </p:dataList>

			</p:layoutUnit>

			<p:layoutUnit position="center" header="Videogames">
				
				<p:dataTable id="dataTableVideogame" widgetVar="dataTableVideogame"
				 value="#{utilizacaoBean.listaVideogameDisponiveis}" var="videogame">
	
					<p:column>
						<f:facet name="header">
							<h:outputText value="Código" />
						</f:facet>
						<h:outputText value="#{videogame.id}" />
					</p:column>
					<p:column>
						<f:facet name="header">
							<h:outputText value="Videogame" />
						</f:facet>
						<h:outputText value="#{videogame.plataforma.nome}" />
					</p:column>
				</p:dataTable>

			</p:layoutUnit>

		</p:layout>




	</h:form>
</body>
</html>
